<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/type.css">
    <link rel="stylesheet" href="./css/iconfont1.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2619794_1d8369envn6.css">
    <script type="text/javascript" src="./js/type.js"></script>
    <title>分类</title>
</head>

<body>
    <div>
        <div class="top-div">
            <div class="search-div01">
                <div class="search-details-div">
                    <div class="serch-icon">
                        <span class="iconfont1  icon-sousuo1"></span>
                    </div>
                    <div class="serch-input-div"><input class="serch-input" type="search" placeholder="请输入搜索关键词"
                            value="" /></div>
                    <div>

                    </div>
                </div>
            </div>
        </div>
        <div class="types">
            <div class="type-div">
                <div class="type-name-div scroll">
                    <ul class="type-name-ul" id="type-name-ui">

                    </ul>
                </div>
                <div class="type-details-div scroll">
                    <ul class="type-details-ul" id="type-details-ul">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div id="tab-div">
        <a href="./index.html" class="tab-item">
            <div class="item-div">
                <span class="iconfont1 icon-shouyex"></span>
            </div>
            <div>首页</div>
        </a>
        <a href="#" class="tab-item" style="color: #c03131;">
            <div class="item-div">
                <span class="iconfont1 icon-biaoqianA01_fenlei-57" ></span>
            </div>
            <div>分类</div>
        </a>
        <a href="./shoppingCart.html" class="tab-item">
            <div class="item-div">
                <span class="iconfont1 icon-gouwuche"></span>
            </div>
            <div>购物车</div>
        </a>
        <a href="./Personal Center.html" class="tab-item">
            <div class="item-div">
                <span class="iconfont1 icon-wode"></span>
            </div>
            <div>我的</div>
        </a>
    </div>
</body>
<script>
    var type_details_ul = document.getElementById("type-details-ul");
    var type_name_ui = document.getElementById("type-name-ui");
    var type_name_lis = "";
    //把json中的name渲染到页面
    for (var i = 0; i < type.length; i++) {
        type_name_lis += '<li class="type-name-li" id="type-name-li'+i+'"  onclick="aa(' + i + ')" >' +
            '<div class="type-name-li-div" id="type-name-li-div' + i + '"></div>' +
            '<div class="type-name-li-name">' + type[i].name + '</div>' +
            '</li>';
    }
    type_name_ui.innerHTML = type_name_lis;
    //第一次加载页面时调用
    ss()
    function ss() {
        var type_details_lis = "";
        document.getElementById("type-name-li0").className = "type-name-lis";
        document.getElementById("type-name-li-div0").className = "type-name-li-divs";
        for (var i = 0; i < type[0].details.length; i++) {
            type_details_lis += " <li class='type-details-li'>" +
                "<img src='" + type[0].details[i].img + "' alt=''>" +
                "<p class='f12'>" + type[0].details[i].name + "</p>" +
                "</li>";
        }
        type_details_ul.innerHTML = type_details_lis;
    }
    //点击后
    function aa(s) {
        document.getElementById("type-name-li"+s).className = "type-name-lis";
        var type_name_li_divs = document.getElementById("type-name-li-div" + s);
        type_name_li_divs.className = "type-name-li-divs";
        bb(s);
    }
    function bb(s) {
        for (var i = 0; i < type.length; i++) {
            if (i != s) {
                document.getElementById("type-name-li"+i).className = "type-name-li";
                document.getElementById("type-name-li-div" + i).className = "type-name-li-div";;
            }
        }
        var type_details_lis = "";
        for (var i = 0; i < type[s].details.length; i++) {
            type_details_lis += " <li class='type-details-li'>" +
                "<img src='" + type[s].details[i].img + "' alt=''>" +
                "<p class='f12'>" + type[s].details[i].name + "</p>" +
                "</li>";
        }
        type_details_ul.innerHTML = type_details_lis;
    }
</script>

</html>